<template>
	<el-dialog :model-value="modelValue" title="发布主题" width="70%" @close="close" @open="open" :destroy-on-close="true">
		<el-form :rules="rules" :model="form" ref="ruleFormRef">
			<el-row :gutter="24">
				<el-col :span="12">
					<el-form-item label="主题标题" prop="title">
						<el-input v-model="form.title" placeholder="请输入标题" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="板块" prop="board">
						<el-select v-model="form.board" placeholder="请选择板块">
							<el-option v-for="item in boardList" :value="item.id" :label="item.name"/>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="24">
				<el-col :span="24">
					<el-form-item label="正文" prop="content">
						<Editor v-model="form.content"/>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>

		<template #footer>
			<el-button @click="close">取消</el-button>
			<el-button type="primary" @click="submit">确定</el-button>
		</template>
	</el-dialog>
</template>
<script setup lang="ts">
import {defineProps, defineEmits, ref} from 'vue'
import Editor from '/@/components/Editor/Index.vue'
import {board_list, add_topics} from '/@/api/forum'
import {useUserConfig} from '/@/stores/UserInfoConfig'
const userStore = useUserConfig()
import emitter from '/@/utils/emitter.js'
import {useMessage} from "/@hooks/message";

const ruleFormRef = ref(null)
const rules = {
	title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
	content: [{ required: true, message: '请输入正文', trigger: 'blur' }],
	board: [{ required: true, message: '请选择板块', trigger: 'blur' }]
}

//板块列表
const boardList = ref([])
const getBoardList = async ()=>{
	const res = await board_list()
	boardList.value = res.data.boards
}
const props = defineProps({
    modelValue: {
		type: Boolean,
		default: false
	}
})

const form = ref({
	title: '',
	content: '',
	author: ''
})

const open = ()=>{
	form.value.author = userStore.userInfo.id
	getBoardList()
}

const submit = async ()=>{
	await ruleFormRef.value.validate(async (valid, fields) => {
		if (valid) {
			const res = await add_topics(form.value)
			if(res.code == 200){
				useMessage().success('发布成功')
				//通知兄弟组件 HotRankingCard.vue 更新数据
				emitter.emit('loadHosts')
				//通知兄弟组件MainBorads.vue 更新数据
				emitter.emit('refreshBoard')
				close()
			}
		}
	})
}

const emits = defineEmits(['update:modelValue'])

const close = ()=> {
	emits('update:modelValue', false)
}
</script>
<style scoped lang="scss">

</style>
